<template>
    <a-modal v-model:open='open' :title='isEdit ? $t("编辑") : $t("New")' @afterClose='handleClose' :maskClosable="false">
        <a-spin :spinning="spinning">
            <a-form ref="formRef" :model="formState" name="basic" v-bind="{
                labelCol: { span: 5 },
            }" :rules="rules">
                <a-form-item :label="$t('轮班')" name="dictData">
                    <a-input v-model:value="formState.dictData" />
                </a-form-item>
                <a-form-item :label="$t('nameEn')" name="dictDesc">
                    <a-input v-model:value="formState.dictDesc" />
                </a-form-item>
                <a-form-item :label="$t('nameZh')" name="descZh">
                    <a-input v-model:value="formState.descZh" />
                </a-form-item>
                <a-form-item :label="$t('nameAr')" name="descAr">
                    <a-input v-model:value="formState.descAr" />
                </a-form-item>
            </a-form>
        </a-spin>
        <template #footer>
            <a-button key='back' @click='handleClose'>{{ $t('关闭') }}</a-button>
            <a-button key='submit' type='primary' :loading='loading' @click='submit'>{{ $t('保存') }}</a-button>
        </template>
    </a-modal>
</template>
<script lang='ts' setup>
import { DefineProps, computed, defineEmits, onMounted, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import { message } from 'ant-design-vue';
import { GenItem, AddItem } from './item-data'
import { useLanguage } from "@/hooks/index"
import { AddDict, EditDict } from '@/api/setting'
const { isEn, isCn, isArabic } = useLanguage()
const { t: $t } = useI18n();
const loading = ref(false)
const formRef = ref(null)
let spinning = ref(false)
const dictKey = "employeeRotationDesc"
const emit = defineEmits(['ok', 'close', 'update:visible'])
const props = defineProps({
    visible: {
        type: Boolean,
        required: true,
        default: false
    },
    target: {
        type: Object,
        required: true,
        default: () => { }
    }
})
const open = computed({
    get() {
        return props.visible
    },
    set(value) {
        emit('update:visible', value)
    }
})
const formState = ref(new GenItem());
const rules = {
    dictData: [{ required: true, message: $t('请输入'), trigger: ['blur', 'change'] }],
    dictDesc: [{ required: true, message: $t('请输入'), trigger: ['blur', 'change'] }],
    descZh: [{ required: true, message: $t('请输入'), trigger: ['blur', 'change'] }],
    descAr: [{ required: true, message: $t('请输入'), trigger: ['blur', 'change'] }],
}
const isEdit = computed(() => {
    if (isEmpty(props.target)) return false
    return true
})
watch(() => open,
    (newVal, oldVal) => {
        if (newVal.value && props.target.uuid) {
            spinning.value = true
            formState.value = cloneDeep(props.target)
            spinning.value = false
        } else {
            formState.value = new GenItem()
        }
    },
    {
        deep: true,
        immediate: true,
    }
)
const submit = debounce(
    async () => {
        formRef.value.validate().then(async () => {
            const data = cloneDeep(formState.value)
            data.dictKey = dictKey
            // 自定义处理部分
            loading.value = true
            if (isEdit.value) {
                await EditDict(formState.value.uuid, data).finally(() => {
                    loading.value = false
                })
            }
            if (!isEdit.value) {
                await AddDict(data).finally(() => {
                    loading.value = false
                })
            }
            message.success($t('操作成功'))
            handleOk()
        }).catch((error: any) => {
            // consolelog('error', error);
        });
    }, 1000
)
//
// 自定义业务处理
// 
const resetForm = () => {
    formRef.value.resetFields();
};
const clearValidates = () => {
    formRef.value.clearValidate();
};
const handleOk = () => {
    clearValidates()
    resetForm()
    emit('ok', open.value = false)
}
const handleClose = () => {
    clearValidates()
    resetForm()
    emit('update:visible', false)
}
</script>
<style lang='scss' scoped>
@include form-item-space;
</style>